<template>
  <el-form
    label-position="top"
    :model="formdata"
    :rules="rules"
    style="padding: 0px 16px 0px 16px"
  >
    <h4 class="title">{{ $t('文件名称') }}</h4>
    <el-form-item prop="name">
      <el-input v-model="formdata.name" :placeholder="$t('请输入文件名称')" />
    </el-form-item>

    <h4 class="title">{{ $t('画布') }}</h4>

    <el-form-item
      :label="`${$t('当前尺寸')}(px)`"
      prop="size"
      class="size-input"
    >
      <div class="line">
        {{ $t('宽') }}
        <el-input-number
          v-model="formdata.width"
          controls-position="right"
          style="width: 86px"
        />
      </div>
      <div class="line">
        {{ $t('高') }}
        <el-input-number
          v-model="formdata.height"
          controls-position="right"
          style="width: 86px"
        />
      </div>
    </el-form-item>
    <el-form-item :label="`${$t('常用尺寸')}(px)`" class="size-input">
      <el-select
        v-model="formdata.size"
        :placeholder="$t('请选择常用尺寸')"
        style="width: 100%"
        @change="selPosterSize"
      >
        <el-option
          v-for="item in commonSize"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <h4 class="title">{{ $t('格式') }}</h4>
    <el-form-item label="" prop="type">
      <el-select
        v-model="formdata.type"
        style="width: 100%"
        :placeholder="$t('请选择海报格式')"
      >
        <el-option
          v-for="item in img_type_list"
          :key="item"
          :label="item"
          value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <h4 class="title">{{ $t('图片质量') }}</h4>
    <el-form-item label="" prop="qulity">
      <div class="slider-num">
        <i>0</i>
        <i>{{ formdata.qulity }}</i>
      </div>
      <el-slider v-model="formdata.qulity" />
    </el-form-item>
    <h4 class="title">{{ $t('背景图') }}</h4>
    <el-form-item>
      <el-upload
        class="upload-demo"
        :headers="myHeaders"
        :action="$store.getters.updateURL + 'material/upload'"
        :on-success="handleSuccess"
        :show-file-list="false"
      >
        <el-button class="upload-btn" plain>{{ $t('上传背景图') }}</el-button>
      </el-upload>
    </el-form-item>
    <h4 class="title">{{ $t('背景色') }}</h4>
    <el-color-picker v-model="formdata.color" />
  </el-form>
</template>

<script>
export default {
  props: ['formdata'],
  data() {
    return {
      img_type_list: ['jpg', 'png', 'jpeg', 'wbmp'],
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      commonSize: [
        {
          id: 1,
          label: `${this.$t('海报')} 750 x 1333`,
          width: 750,
          height: 1333
        },
        {
          id: 2,
          label: `${this.$t('课程封面')} 900 x 500`,
          width: 900,
          height: 500
        },
        {
          id: 3,
          label: `${this.$t('公众号首图')} 900 x 383`,
          width: 900,
          height: 383
        },
        {
          id: 4,
          label: `${this.$t('海报')} 640 x 1008`,
          width: 640,
          height: 1008
        },
        {
          id: 5,
          label: `${this.$t('海报')} 720 x 1280`,
          width: 720,
          height: 1280
        },
        {
          id: 6,
          label: `${this.$t('海报')} 1078 x 2280`,
          width: 1078,
          height: 2280
        },
        {
          id: 7,
          label: `${this.$t('海报')} 1242 x 2208`,
          width: 1242,
          height: 2208
        },
        {
          id: 8,
          label: `${this.$t('朋友圈背景图')} 800 x 800`,
          width: 800,
          height: 800
        },
        {
          id: 9,
          label: `${this.$t('长图海报')} 800 x 2000`,
          width: 800,
          height: 2000
        },
        {
          id: 10,
          label: `${this.$t('方形海报')} 1200 x 1200`,
          width: 1200,
          height: 1200
        },
        {
          id: 11,
          label: `${this.$t('方形')} 1080 x 1080`,
          width: 1080,
          height: 1080
        }
      ],
      rules: {
        name: [{ required: true, message: this.$t('请填写名称') }],
        type: [{ required: true, message: this.$t('请选择格式') }],
        qulity: [{ required: true, message: this.$t('请设置图片质量') }],
        size: [{ required: true, message: this.$t('请设置尺寸') }]
      }
    }
  },
  watch: {
    'formdata.width'() {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.height'() {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.color'() {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    'formdata.img_src'() {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    }
  },
  methods: {
    // 上传成功
    handleSuccess(res, file) {
      this.formdata.img_src = res.data.url
    },
    // 切换颜色还是背景
    handleClick() {
      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    },
    // 选择海报尺寸
    selPosterSize(size) {
      this.commonSize.forEach(element => {
        if (element.id === size) {
          this.formdata.width = element.width
          this.formdata.height = element.height
          return false
        }
      })

      this.$emit('baseUpdate', { type: 'style', data: this.formdata })
    }
  }
}
</script>

<style scoped lang="scss">
h4.title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1d2129;
  line-height: 22px;
  margin-bottom: 8px;
}
.el-form--label-top .size-input ::v-deep {
  .el-form-item__label,
  .line {
    color: #86909c;
  }
  .el-form-item__content::before,
  .el-form-item__content::after {
    display: none;
  }
  .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input-number.is-controls-right .el-input__inner {
      padding: 0 20px 0 5px;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      width: 18px;
      background-color: #fff;
      border: none;
      .el-icon-arrow-up,
      .el-icon-arrow-down {
        font-weight: bold;
      }
    }
  }
}
.slider-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  i {
    font-style: normal;
    line-height: 0;
    color: #86909c;
  }
}
::v-deep {
  .el-upload {
    width: 100%;
    .upload-btn {
      width: 100%;
      background-color: #f2f3f5;
      border-color: transparent;
    }
  }
}
</style>
